// createRouter 创建vue路由实例对象，并注册对应的路由匹配规则
// createWebHistory 路由使用是 history模式   浏览器
// createWebHashHistory  hash模式           浏览器
// createMemoryHistory   memory模式         应用，如小程序 / App
import {
  createRouter,
  createWebHistory,
  createWebHashHistory
} from 'vue-router'

// 路由匹配成功后渲染的组件
// import home from '@/views/home/index.vue'
// import about from '@/views/about/index.vue'
// import login from '@/views/login/index.vue'
import notfound from '@/views/notfound/index.vue'
import news from '@/views/news/index.vue'
import newsDetail from '@/views/news/detail.vue'

import layout from '@/views/admin/layout.vue'
import welcome from '@/views/admin/welcome.vue'
import user from '@/views/admin/user.vue'
import film from '@/views/admin/film.vue'

// es8提供的，可以import当作函数调用，返回promise模块化
// import如果用作函数方式，他会对模块进行拆分，为一个独立文件 -- es8
// import()

const router = createRouter({
  // 指定当前你定义路由的模式
  history: createWebHistory(),
  // 路由规则表
  // vue-router它的规则是严格匹配
  routes: [
    // 重定向
    // {
    //   // 如果你访问的pathname为 / 则跳转到 /home
    //   path: '/',
    //   redirect: '/home'
    // },
    {
      // 路由的路径匹配规则，如果你地址栏中的pathname和当前的path一致则，调用component中的组件进行渲染
      // path: '/home',
      path: '/',
      // component: home
      // 路由懒加载和拆分
      component: () => import('@/views/home/index.vue')
    },
    {
      path: '/about',
      // 给当前路由规则起一个名称，此名称给声明式导航和编程式导航跳转所用，不会影响地址栏中的显示
      name: 'about',
      component: () => {
        return import('@/views/about/index.vue')
      }
    },
    {
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      // 路由元信息 -- 给程序进行扩展所用
      meta: {
        title: '用户登录',
        aa: 2,
        cc: [1, 2, 3]
      }
    },
    {
      path: '/news',
      component: news
    },
    {
      // 动态路由
      path: '/news/:id',
      name: 'newsDetail',
      component: newsDetail,
      // boolean类型，作用：把动态路由参数映射到props属性来获取 props:['id']
      // props: true
      // 回调函数方式，它可以对我们要传入的数据进行类型转换后再传给渲染组件
      props: (route) => {
        // console.log(route)
        return {
          id: route.params.id ? Number(route.params.id) : 0,
          ...route.query,
          age: route.query.age ? Number(route.query.age) : 0
        }
      }
    },
    // 嵌套路由 / 子路由
    // 一般多用于后台管理系统时路由定义
    // /admin/a  /admin/b  /admin/c
    // 几个页面切换，但大多数布局是一样的，只有少部份不一样
    {
      path: '/admin',
      component: layout,
      redirect: '/admin/welcome',
      // 子路由
      children: [
        {
          // 不要写父路由  welcome
          // /admin/welcome
          path: 'welcome',
          component: welcome
        },
        {
          path: 'user',
          component: user
        },
        {
          path: 'film',
          component: film
        }
      ]
    },

    // 404定义的路由规则，都写在规则最后一条,如果上面的规则都不匹配，我就来匹配它
    // vue2 vue-router {path:'*',...}
    {
      path: '/:pathMatch(.*)*',
      component: notfound
    }
  ]
})

export default router
